<div>
		<h1><fly:translate name="text_1" /> <fly:variable name="video_image_name"/></h1>
		<br>
		<div class="magic_img_scroll hidden">
			<div class="pointer" id="pointer"></div>
		</div>		
		
		<div id="form-ligne-location">
			<div id="form-titre-location"><fly:translate name="label_1" /></div>
			<div id="form-field-location"><fly:variable name='all_frame' /></div>
		</div>
		<div id="form-ligne-location">
			<div id="form-titre-location"><fly:translate name="label_2" /></div>
			<div id="form-field-location"><input type="text" id="frame_number"/> <input type="button" id="btn_show_frame" value="<fly:translate name='button_1' />"/></div>
		</div>
		<div id="form-ligne-location">
			<div id="form-titre-location"><div class="message_info hidden" id="sms_error" style="color:red;"></div></div>
		</div>
		
		
		<div class="list_photos_no_croll">	
			<div class="list_photos">
				<fly:list name='list_photo'>
					<div id="div_frame_<fly:variable name='frame_number' />" class="b_img <fly:variable name='class_selected_image' />" style="height: <fly:variable name='height_out' />px;width: <fly:variable name='width_out' />px;">
						<img class="img_frame" id="img_<fly:variable name='frame_number' />" title="<fly:variable name='title' />" src="<fly:variable name='url_video_photo' />" width="<fly:variable name='width' />" height="<fly:variable name='height' />" />
						<div class="photo_title" id="title_<fly:variable name='frame_number' />"><fly:variable name='frame_number' /></div>
					</div>
				</fly:list>
			</div>
		</div>
		<input type="button" id="btn_save" value="<fly:translate name='button_2' />" class="bouton"/>
		<script type="text/javascript">
			var div = '';
			var timeout = null;
			var delay_search = 500;
			$(document).ready(function(){
				document.onkeyup = function(e){ 	
	          		if(e == null) { // ie
	          			keycode = event.keyCode;
	          		} else { // mozilla
	          			keycode = e.which;
	          		}
	          		if(keycode == 27){ // close	
	          		}
	          	};
	          	$($('#frame_number')).keydown(function(event){
				  if(event.keyCode==13) {
				  	showFrame();
				  }
				});
	          	$('#btn_show_frame').click(function(){
	          		showFrame();
	          	});
	          	
	          	$('.b_img').click(function(){
					$('.b_img').removeClass("media_selected");
					$(this).addClass("media_selected");
					$('#selected_frame<fly:variable name="id_fichier"/>').text($('> .photo_title',this).text());
	          	});
	          	
	          	$('#btn_save').click(function(){
	          		$.ajax({
					   type: "POST",
					   url: "<fly:variable name="rep_ajax"/>upload_video_image_save.php",
					   data: "thumbnail_at_frame_number="+$('#selected_frame<fly:variable name="id_fichier"/>').text().trim()+'&id_fichier='+<fly:variable name="id_fichier"/>+'&duration='+<fly:variable name="duration"/>+'&filename=<fly:variable name="video_image_name"/>&base64='+($('.b_img.media_selected > img').attr('src')).replace(/\+/g,'*'),
					   success: function(msg){
					     if(msg=='true'){
					     	$('#img<fly:variable name="id_fichier"/>').attr('src',$('.b_img.media_selected > img').attr('src'));
					     	$('#txt_selected_frame').text($('#selected_frame<fly:variable name="id_fichier"/>').text());
							$('#start_frame<fly:variable name="id_fichier"/>').text($('#selected_frame<fly:variable name="id_fichier"/>').text().trim());
					     	$.jPopup.remove();
					     }else{
							$('#sms_error').text('Error on save.').show('fast');
				            if (timeout) clearTimeout(timeout);
								timeout = setTimeout(function(){
				            		$('#sms_error').fadeOut("slow");
				            }, delay_search);
					     }
					   }
					 });
	          	});
			});
			function showFrame(){
	          	var frame_start = $('#frame_number').val();
			    var timer = null;
				var timeout = null;
				var delay_search = 1000;
				var all_frame = '<fly:variable name="all_frame"/>' ;
	          		//if(frame_start>parseInt($('#all_frame<fly:variable name="id_fichier"/>').text())){
	          		if(frame_start>parseInt(all_frame)){
							$('#sms_error').text('Out of frame number.').show('fast');
				            if (timeout) clearTimeout(timeout);
								timeout = setTimeout(function(){
				            		$('#sms_error').fadeOut("slow");
				            }, delay_search);
	          		}else{
				        $('#sms_error').fadeOut("slow");
	          			ajaxGetImage(frame_start);          		
						$('.b_img').removeClass("media_selected");
	          		}
			        
			}
			function ajaxGetImage(frame_start){		
	          		$.ajax({
					   type: "POST",
					   url: "<fly:variable name="rep_ajax"/>upload_video_image_get.php",
					   data: "frame_start="+frame_start+'&filename=<fly:variable name="filename"/>',
					   beforeSend: function(){
							ajaxLoading(1);
					   },
					   success: function(data){
					   		ajaxLoading(0);
							data = eval(data);
				            if($(data).attr('status') == 0) {
								alert($(data).attr('msg'));
								return false;
				            }
				            if($(data).attr('status') == 1) {
				            	$.each( $(data).attr('data'), function(i, n){
									$('#img_'+(parseInt($('#start_frame<fly:variable name="id_fichier"/>').text())+parseInt(i))).attr('src',$(n).attr('img_data'));									
		          					$('#title_'+(parseInt($('#start_frame<fly:variable name="id_fichier"/>').text())+parseInt(i))).text((parseInt(frame_start)+parseInt(i)));
		          					$('#img_main').attr('src',$(n).attr('img_data'));		
								});
								if($(data).attr('data').length<parseInt($('#display_frames').text())){
									var last_get_frame = ($(data).attr('data').length+parseInt($('#start_frame<fly:variable name="id_fichier"/>').text()));
									var end_frame = (last_get_frame+(parseInt($('#display_frames').text())-$(data).attr('data').length))-1;
									for (i=last_get_frame;i<=end_frame;i++){
										$('#div_frame_'+parseInt(i)).hide();
									}	
								}else{
									$('.b_img').show();
								}
				            }
					   },
					   error: function(data, textStatus, e){
							$('#sms_error').text('Error on load image.').show('fast');
				            if (timeout) clearTimeout(timeout);
								timeout = setTimeout(function(){
				            		$('#sms_error').fadeOut("slow");
				            }, delay_search);
					   }
					 });
			}
		</script>
	</div>
</div>